<template>
    <v-container fluid>
        <v-form>
            <v-row>
                <v-col>
                    <v-text-field
                            label="角色英文名"
                            prefix="ROLE_"
                            v-model="roleCode"
                    ></v-text-field>
                </v-col>
                <v-col>
                    <v-text-field
                            label="角色中文名"
                            v-model="roleName"
                    ></v-text-field>
                </v-col>
                <v-col align="start" cols="2">
                    <v-btn color="primary" class="mt-2" @click="addRole">添加角色</v-btn>
                </v-col>
            </v-row>
        </v-form>
        <v-list>
            <v-list-item-group v-model="index">
                <v-list-group
                        v-for="item in items"
                        :key="item.id"
                        v-model="item.active">
                    <template v-slot:activator>
                        <v-list-item-content>
                            <v-list-item-title v-text="item.roleName"></v-list-item-title>
                        </v-list-item-content>
                    </template>

                    <v-card>
                        <v-card-title>
                            可访问资源
                            <v-spacer></v-spacer>
                            <v-btn color="error" @click="deleteRole(item)">
                                删除
                            </v-btn>
                        </v-card-title>
                        <v-treeview
                                selectable
                                v-model="selection"
                                :items="allMenus"
                                item-text="description"
                                open-on-click
                        ></v-treeview>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="primary" @click="updateRole(item)">
                                更新
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-list-group>
            </v-list-item-group>
        </v-list>
    </v-container>
</template>

<script>
    export default {
        name: "RoleManage",
        data: () => ({
            roleCode: '',
            roleName: '',
            index: -1,
            allMenus: [],
            selection: [],
            items: [],
        }),
        created() {
            this.initialize()
            this.getAllMenus()
        },
        methods: {
            initialize() {
                this.$axios.get("role").then(response => {
                    this.items = response.data
                }).catch(error => {
                    console.log(error)
                })
            },
            addRole() {
                this.$axios.post('role', {
                    'roleName': this.roleName,
                    'roleCode': this.roleCode
                }).then(response => {
                    this.roleName = ''
                    this.roleCode = ''
                    this.initialize()
                }).catch(error => {
                    console.log(error)
                })
            },
            deleteRole(role) {
                this.$axios.delete("role/" + role.id).then(response => {
                    this.initialize()
                }).catch(error => {
                    console.log(error)
                })
            },
            getAllMenus() {
                this.$axios.get("menu").then(response => {
                    this.allMenus = response.data
                }).catch(error => {
                    console.log(error)
                })
            },
            getRoleMenus(id) {
                this.$axios.get("menu/role/" + id).then(response => {
                    this.selection = response.data
                }).catch(error => {
                    console.log(error)
                })
            },
            updateRole(role) {
                this.$axios.put("role/menu", {
                    'id': role.id,
                    'menuIds': this.selection
                }).then(response => {

                }).catch(error => {

                })
            }
        },
        watch: {
            index(val) {
                this.getRoleMenus(this.items[val].id)
            }
        }
    }
</script>

<style scoped>

</style>